<!-- 司机认证 -->
<template>
  <view class="content">
    <u-form
      :model="form"
      ref="uForm"
      :label-width="240">
      <u-form-item
        label="司机姓名"
        prop="driverName"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input
          v-model="form.driverName"
          :maxlength="10" />
      </u-form-item>
      <u-form-item
        label="司机电话"
        prop="driverPhone"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input v-model="form.driverPhone" />
      </u-form-item>
      <u-form-item
        label="登录密码"
        prop="password"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input v-model="form.password" />
      </u-form-item>
      <u-form-item
        label="身份证号码"
        prop="idcard"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input v-model="form.idcard" />
      </u-form-item>
      <u-form-item
        label="从业资格证号"
        prop="certificateNo"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-input v-model="form.certificateNo" />
      </u-form-item>
      <u-form-item
        label="所属承运商"
        prop="carrierId"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-select
          v-model="show"
          mode="single-column"
          :list="list2"
          @confirm="confirm"></u-select>
        <u-input
          v-model="form.carrierName"
          type="select"
          :border="border"
          @click="show = true" />
      </u-form-item>
      <u-form-item
        label="家庭住址"
        prop="driverAddress">
        <u-input
          v-model="form.driverAddress"
          :maxlength="100" />
      </u-form-item>
      <u-form-item
        label="备注"
        prop="remark">
        <u-input
          v-model="form.remark"
          :maxlength="100" />
      </u-form-item>
      <u-form-item
        label="驾驶证照片"
        prop="driverLicense"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-upload
          ref="uUpload"
          action="https://www.sxjbjt.com:9507/qdbt/freight-unattended-sunshine/minio/upload"
          :file-list="driverLicenseUploadList"
          @on-success="driverLicensesuccess"
          @on-error="testerror"
          max-count="1"
          :form-data="{
            url: 'driverManagement'
          }"></u-upload>
      </u-form-item>
      <u-form-item
        label="身份证正面"
        prop="idcardFrontPhoto"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-upload
          ref="uUpload"
          action="https://www.sxjbjt.com:9507/qdbt/freight-unattended-sunshine/minio/upload"
          :file-list="idCardFrontUploadList"
          @on-success="idCardFrontsuccess"
          @on-error="testerror"
          max-count="1"
          :form-data="{
            url: 'driverManagement'
          }"></u-upload>
      </u-form-item>
      <u-form-item
        label="身份证反面"
        prop="idcardBackPhoto"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx'
        }">
        <u-upload
          ref="uUpload"
          action="https://www.sxjbjt.com:9507/qdbt/freight-unattended-sunshine/minio/upload"
          :file-list="idCardReverseUploadList"
          @on-success="idCardReversesuccess"
          @on-error="testerror"
          max-count="1"
          :form-data="{
            url: 'driverManagement'
          }"></u-upload>
      </u-form-item>
    </u-form>
    <u-button
      type="primary"
      @click="submit"
      >提交</u-button
    >
    <!-- 用来提示 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  // onPullDownRefresh() {
  //   setTimeout(() => {
  //     this.getById()
  //     uni.stopPullDownRefresh()
  //   }, 1000)
  // },
  data() {
    return {
      form: {
        driverName: '',
        driverPhone: '',
        password: '',
        idcard: '',
        certificateNo: '',
        carrierId: '',
        carrierName: '',
        driverAddress: '',
        driverLicense: '',
        idcardFrontPhoto: '',
        idcardBackPhoto: '',
        remark: ''
      },
      rules: {
        driverName: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur'
          }
        ],
        driverPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['change', 'blur']
          },
          // 正则判断为字母或数字
          {
            pattern: /^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,16}$/,
            // 正则检验前先将值转为字符串
            transform(value) {
              return String(value)
            },
            message: '密码应为6~16位数字字母组合，请检查格式是否正确',
            trigger: 'blur'
          }
        ],
        idcard: [
          // 必填规则
          {
            required: true,
            message: '身份证号码不能为空',
            // blur和change事件触发检验
            trigger: 'blur'
          },
          //
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.idCard(value)
            },
            message: '身份证号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur']
          }
        ],
        carrierId: [
          // 必填规则
          {
            required: true,
            message: '所属承运商不能为空',
            // blur和change事件触发检验
            trigger: 'change'
          }
        ],
        certificateNo: [
          // 必填规则
          {
            required: true,
            message: '从业资格证号不能为空',
            // blur和change事件触发检验
            trigger: 'blur'
          },
          //
          {
            pattern: /^[a-zA-Z0-9_]{0,32}$/,
            transform(value) {
              return String(value)
            },
            message: '请输入正确的从业资格证号',
            trigger: 'blur'
          }
        ]
        // driverLicense: [
        //   {
        //     required: true,
        //     message: '请上传驾驶证照片',
        //     trigger: 'change',
        //   },
        // ],
        // idcardFrontPhoto: [
        //   {
        //     required: true,
        //     message: '请上传身份证正面照片',
        //     trigger: 'change',
        //   },
        // ],
        // idcardBackPhoto: [
        //   {
        //     required: true,
        //     message: '请上传身份证反面照片',
        //     trigger: 'change',
        //   },
        // ],
      },
      driverLicenseUploadList: [],
      idCardFrontUploadList: [],
      idCardReverseUploadList: [],
      testUploadList: [],
      maxSize: 10485760,
      show: false,
      list2: []
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    idCardReversesuccess(data, index, lists, name) {
      this.form.idcardBackPhoto = data.result
      this.showToast('上传成功', 'success')
    },
    idCardFrontsuccess(data, index, lists, name) {
      this.form.idcardFrontPhoto = data.result
      this.showToast('上传成功', 'success')
    },
    driverLicensesuccess(data, index, lists, name) {
      this.form.driverLicense = data.result
      this.showToast('上传成功', 'success')
    },
    testerror(res, index, lists, name) {
      this.showToast('上传失败', 'warning')
    },

    confirm(e) {
      this.form.carrierName = e[0].label
      this.form.carrierId = e[0].value
      console.log(this.form.carrierId)
    },

    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (
            !this.form.driverLicense ||
            !this.form.idcardFrontPhoto ||
            !this.form.idcardBackPhoto
          ) {
            this.showToast('部分图片没有上传，请上传图片', 'warning')
            return
          }
          console.log('验证通过')
          this.handleSubmit()
        } else {
          console.log('验证失败')
        }
      })
    },

    // 获取详情数据
    async handleSubmit() {
      const res = await this.$u.post(
        '/freight-unattended-sunshine/carDriverArchives/add',
        this.form
      )
      if (res.code === '0') {
        this.showToast('注册成功', 'success')
        uni.setStorageSync('username', this.form.driverPhone)
        uni.setStorageSync('password', this.form.password)
        setTimeout(() => {
          this.goToUrl('/pages/login/login')
        }, 1000)
      } else {
        this.$api.msg(res.message)
      }
    },

    /**获取承运商列表 */
    async getVonderList() {
      let params = { pageNum: 1, pageSize: 100 }
      const res = await this.$u.get(
        '/freight-unattended-sunshine/carrier/page',
        params
      )
      if (res.code === '0') {
        let arr = []
        if (res.result.records) {
          res.result.records.forEach((p) => {
            arr.push({
              label: p.carrierName,
              value: p.id
            })
          })
        }
        this.list2 = arr
      } else {
        this.$api.msg(res.message)
      }
    },

    showToast(title, type) {
      this.$refs.uToast.show({
        title,
        type: type || 'error'
      })
    },
    goToUrl(url) {
      this.$u.route(url)
    }
  },
  mounted() {
    this.getVonderList()
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}
</style>
